<template>
  <!-- 通知栏 -->
  <van-notice-bar
      left-icon="volume-o"
      text="急速服务为您提供最快最优的服务，您的满意是我们的唯一标准！"
  />
  <!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#000">
    <van-swipe-item v-for="(pic, index) in swipePics" :key="index">
      <van-image width="100%" height="180" :src="pic" />
    </van-swipe-item>
  </van-swipe>
  <!-- 热门服务 -->
  <div class="home-hot">
    <van-grid>
      <van-grid-item v-for="hot in hots" :key="hot.id" @click="onClick(hot.id)">
        <van-image :src="hot.pic" />
        <div class="name">{{ hot.name }}</div>
      </van-grid-item>
    </van-grid>
  </div>
  <!--banner-->
  <div class="banner">
    <van-image width="100%" height="150" :src="banner" />
  </div>
  <!-- 服务资讯 -->
  <div class="service-info">
    <div class="title">服务资讯</div>

    <div class="info-wrapper" v-for="item in serviceInfo" :key="item.id">
      <van-divider :style="{ borderColor: '#999', padding: '5px' , margin: '10px 0 30px'}"/>
      <div class="item">
        <div class="des">
          <van-icon name="bell" color="#ff4f4f"/>
          <div class="txt">{{item.des}}</div>
        </div>
        <div class="view">
          <van-icon name="eye" color="#187be0"/>
          <div class="msg">点击量：{{item.view}}</div>
        </div>
      </div>
      <div class="video-img">
        <video v-if="item.id===1" :src="item.pic" controls></video>
        <img v-else :src="item.pic" alt="" @click="onShowImg"/>
      </div>
    </div>

    <div class="end"> ~ 已经到底了，请再回头看看 ~</div>

  </div>

</template>

<script>
import {reactive, toRefs} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import { ImagePreview } from 'vant'
import swiper1 from '../assets/images/home/swiper-1.jpg'
import swiper2 from '../assets/images/home/swiper-2.jpg'
import swiper3 from '../assets/images/home/swiper-3.jpg'
import swiper4 from '../assets/images/home/swiper-4.jpg'
import swiper5 from '../assets/images/home/swiper-5.jpg'
import hot1 from '../assets/images/home/hot-1.png'
import hot2 from '../assets/images/home/hot-2.png'
import hot3 from '../assets/images/home/hot-3.png'
import hot4 from '../assets/images/home/hot-4.png'
import banner from '../assets/images/home/banner.png'
import msg1 from '../assets/video/msg-01.mp4'

export default {
  name: "Home",
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      swipePics: [swiper1,swiper2,swiper3,swiper4,swiper5],
      hots: [
        {id: 1, pic: hot1, name: '保洁打扫'},
        {id: 2, pic: hot2, name: '管道疏通'},
        {id: 3, pic: hot3, name: '家电维修'},
        {id: 4, pic: hot4, name: '家具清理'},
      ],
      serviceInfo: [
        {id: 1, pic: msg1, des: '家电长时间不清理的结果', view: 612},
        {id: 2, pic: swiper1, des: '专业师傅正在清理油烟机', view: 612},
        {id: 3, pic: swiper2, des: '专业师傅正在修理洗衣机', view: 612},
        {id: 4, pic: swiper3, des: '专业师傅正在修理空调并清理', view: 612},
        {id: 5, pic: swiper4, des: '油烟机清理前后', view: 612},
        {id: 6, pic: swiper5, des: '专业阿姨正在打扫房间', view: 866},
      ],
    })
    const onShowImg = ()=> {
      ImagePreview({
        images: state.swipePics,
        closeable: true,
      })
    }
    const onClick = id => {
      router.push({path: '/info', query:{id:id}})
      // router.push({name: 'info', params:{id:id}}) //路由传参方式2
    }
    return {
      ...toRefs(state),
      banner,
      onClick,
      onShowImg
    }
  }

}
</script>

<style lang="less">
.home-hot {
  margin: 5px 0;

  img {
    width: 42px;
  }

  .name {
    margin-top: 10px;
    font-size: 12px;
  }
}

.banner {
  width: 100%;
  height: 150px;
}

.service-info {
  margin: 2px;
  padding: 10px;
  background-color: #ffffff;

  .title {
    margin: 20px 0 0;
  }

  .info-wrapper {
    .item {
      display: flex;
      justify-content: space-between;

      .des {
        display: flex;
        font-size: 14px;

        .txt {
          margin-left: 5px;
          color: #666;
        }
      }

      .view {
        display: flex;
        font-size: 14px;

        .msg {
          margin-left: 5px;
          font-size: 12px;
          color: #999;
        }
      }
    }

    .video-img {
      width: 100%;
      height: 180px;
      margin-top: 10px;

      video {
        width: 100%;
        height: 100%;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .end {
    margin: 50px 0 10px;
    text-align: center;
    color: #d5d1d1;
    font-size: 14px;
  }
}

</style>